<template>
  <div>
    <!--:model="shop" 数据双向绑定-->
    <!--ref="shopForm" id="shopForm",给form去一个名字-->
    <el-form :model="shop" ref="shopForm" label-position="left" label-width="100px"
             class="demo-ruleForm login-container">
      <h3 class="title">店铺入驻</h3>
      <el-form-item prop="name" label="名称">
        <span>{{ shop.name }}</span>
      </el-form-item>
      <el-form-item prop="tel" label="座机">
        <span>{{ shop.tel }}</span>
      </el-form-item>
      <el-form-item prop="address" label="店铺地址">
        <span>{{ shop.address }}</span>
      </el-form-item>
      <el-form-item prop="logo" label="店铺Logo">
        <!--        <el-input type="text" v-model="shop.logo" auto-complete="off" placeholder="请输入logo！"></el-input>-->
        <el-image style="width: 50px; height: 50px" :src="shop.logo" :preview-src-list="[shop.logo]">
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline"></i>
          </div>
        </el-image>
      </el-form-item>

      <el-form-item style="width:100%;">
        <el-button type="primary" style="width:100%;" @click.native.prevent="activation">激活</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.shop.admin.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      keyword: '',
      dialogVisable: false,
      fileList: [],
      //shop:shop 为了做数据表单校验不要嵌套对象
      shop: {
        id: 0,
        name: '',
        tel: '',
        address: '',
        logo: '',
        admin:{
          id:"",
          username:"",
          realName:"",
          phone:"",
          email:"",
          password:""

        }
      },
    };
  },
  created() {  //钩子函数
    // $route.params.shopId 解析在路由中的url
    // JSON.parse()转换JSON的格式
    this.shop.id = JSON.parse(this.$route.params.shopId)  //拿到$route路由里面的url中的shopId
  },
  methods: {
    // 数据回显
    getShop() {
      console.log(this.shop.id)
      this.$http.get("/shop/" + this.shop.id)
          .then(res => {
            res = res.data
            console.log(res.data)
            if (res.success) {
              this.shop = res.data
            }
          })
    },
    //图片预览
    handlePreview(file) {
      console.log(file);
    },
    //激活按钮
    activation() {
      this.$refs.shopForm.validate((valid) => {
        //校验表单成功后才做一下操作
        if (valid) {
          this.$confirm('确认激活吗？', '提示', {}).then(() => {
            let para = Object.assign({}, this.shop);
            this.$http.get("/shop/active/"+para.id)
                .then((res) => {
                  if (res.data.success) {
                    this.$message({
                      message: '激活成功!',
                      type: 'success'
                    });
                    //重置表单
                    this.$refs['shopForm'].resetFields();
                    //跳转登录页面
                    this.$router.push({path: '/login'});
                  } else {
                    this.$message({
                      message: res.data.msg,
                      type: 'error'
                    });
                  }
                });
          });
        }
      })
    }
  },
  mounted() {
    this.getShop();
  }
}

</script>
<style lang="scss" scoped>
.login-container {
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  background-clip: padding-box;
  margin: 180px auto;
  width: 500px;
  padding: 35px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;

  .title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
  }

  .remember {
    margin: 0px 0px 35px 0px;
  }
}

.map {
  width: 100%;
  height: 300px;
}

.searchinput {
  width: 300px;
  box-sizing: border-box;
  padding: 9px;
  border: 1px solid #dddee1;
  line-height: 20px;
  font-size: 16px;
  height: 38px;
  color: #333;
  position: relative;
  border-radius: 4px;
}
</style>